<script setup lang="ts">
import {
  defineExpose,
  h,
  onActivated,
  onMounted,
  ref,
  watchEffect,
  watch,
} from "vue";
import { NButton, useDialog, useMessage } from "naive-ui";
import type { DataTableColumns } from "naive-ui";
import { deleteCompare, getBidCompareList } from "@/service/api";
import { useRouterPush } from "@/hooks/common/router";
import { useRouter } from "vue-router";
import { rowDark } from "naive-ui/es/legacy-grid/styles";
import { key } from "localforage";

const { routerPushByKey } = useRouterPush();
const dialog = useDialog();

function handleDelete(row: any) {
  dialog.info({
    title: "删除查重记录",
    content: "请问是否确认删除该查重记录？",
    positiveText: "确定",
    negativeText: "返回",
    onPositiveClick: async () => {
      const { data, error } = await deleteCompare({ idList: row.id });
      // 算法取消排队接口
      // if (row.catalogStatus == 0) {
      //   await cancelTaskGenerateAction({
      //     task_id: row.id,
      //   });
      // }
      if (!error) {
        message.success("已删除");
        getTableList();
      }
    },
    onNegativeClick: () => {
      message.warning("已取消");
    },
  });
}

const { VITE_OTHER_SERVICE_BASE_URL } = import.meta.env;

const otherUrl: any = JSON.parse(VITE_OTHER_SERVICE_BASE_URL);

const imgUrl = otherUrl.imgUrl;

interface Formtype {
  pageNum: number;
  pageSize: number;
}

const searchVal = ref("");

const formData = ref<Formtype>({
  pageNum: 1,
  pageSize: 10,
});

const pageCount = ref<number>();

const dataList = ref([]);

// 行业类型(1.软件类 2.服务类 3.货物类 4.工程类 5.管理 6.设计 7.技术 8.经济类 20.其他)
const industryObj = ref({
  1: "软件类",
  2: "服务类",
  3: "货物类",
  4: "工程类",
  5: "管理类",
  6: "设计类",
  7: "技术类",
  8: "经济类",
  20: "其他",
});

const tableLoading = ref(false);

async function getTableList() {
  tableLoading.value = true;
  const { data, error } = await getBidCompareList(formData.value);
  if (!error) {
    dataList.value = data?.list;
    pageCount.value = data?.pages;
    tableLoading.value = false;
  }
}

// 获取params

const router = useRouter();

// watchEffect(() => {
//   if (router.currentRoute.value.query.tab == "3") {
//     getTableList();
//   }
// });

watch(
  () => router.currentRoute.value.query.tab,
  (to, from) => {
    if (router.currentRoute.value.query.tab == "4") {
      getTableList();
    }
  },
);

onMounted(() => {
  getTableList();
});

defineExpose({ getTableList });

onActivated(() => {});

function createColumns(): DataTableColumns {
  return [
    {
      title: "序号",
      align: "center",
      key: "key",
      width: "150",
      render: (_, index) => {
        return `${(formData.value.pageNum - 1) * formData.value.pageSize + index + 1}`;
      },
    },
    {
      type: "expand",
      expandable: (rowData: any) => rowData.files.length !== 0,
      renderExpand: (rowData: any) => {
        return h(
          "div",
          {
            style:
              "margin-left:190px; white-space:pre-wrap; line-height:35px; font-size:16px",
          },
          {
            default: () =>
              rowData.files
                .map(
                  (item: any) =>
                    item.bidUnit + "." + item.unitPath.split(".")[1],
                )
                .join("\n"),
          },
        );
      },
    },
    {
      title: "项目名称",
      key: "title",
      ellipsis: {
        tooltip: true,
      },
      width: "600",
    },
    {
      title: "检查日期",
      key: "checkTime",
      align: "center",
    },
    {
      title: "操作",
      key: "actions",
      align: "center",
      render(row: any) {
        return [
          h(
            NButton,
            {
              type: "info",
              strong: true,
              tertiary: true,
              style: "margin-right:10px",
              onClick: () => viewDetail(row),
            },
            { default: () => "查看" },
          ),
          h(
            NButton,
            {
              type: "error",
              strong: true,
              tertiary: true,
              onClick: () => handleDelete(row),
            },
            { default: () => "删除" },
          ),
        ];
      },
    },
  ];
}

// 查看详情
function viewDetail(row: any) {
  const pushParams: any = {
    createType: 2,
    logId: row.id,
    compareName: row.title
  };

  routerPushByKey('duplicate-check_check-result', { query: pushParams });
}

const columns: any = createColumns();

const message = useMessage();

const emit = defineEmits(["backClick", "rightButtonClick"]);

</script>

<template>
  <div class="w-full">
    <div class="title">标书查重记录</div>
    <div class="table-area">
      <n-data-table
        :row-key="(row) => row.id"
        striped
        size="small"
        :loading="tableLoading"
        :columns="columns"
        :data="dataList"
        :bordered="false"
        max-height="650"
        style="font-size: 18px; color: #666666; margin-top: 40px"
      />
      <n-pagination
        size="medium"
        style="float: right; margin-top: 30px; margin-bottom: 10px"
        v-model:page="formData.pageNum"
        v-model:page-size="formData.pageSize"
        :page-count="pageCount"
        @update:page="getTableList"
      />
    </div>
  </div>
</template>

<style scoped lang="scss">
.title {
  font-weight: 500;
  font-size: 19px;
  color: #333333;
  line-height: 48px;
  padding-left: 50px;
  margin-top: 4px;
  border-bottom: #ebeef5 1px solid;
}
.search-box {
  margin-top: 30px;
  margin-left: 32px;
  width: 464px;
  height: 54px;
}
.table-area {
  margin-top: 10px;
  margin-left: 32px;
  width: 1471px;
  height: 400px;
  :deep(.n-data-table .n-data-table-th) {
    background-color: #f2f0ff;
    height: 60px;
    color: #333333;
    font-size: 18px;
  }
}
</style>
